<template>
  <div>
    <!-- <div class="navBar">
      <img class="nav_back" src="@/assets/imgs/fanhui.png" alt />
      <div class="nav_title">油站详情</div>
    </div>-->
    <van-nav-bar title="油站详情" left-text="返回" left-arrow @click-left="onClickLeft" />
    <div class="details_box">
      <div class="deta_head">
        <div class="head_msg_box">
          <div class="site_item">
            <div class="item_left">
              <div class="head_box">
                <van-image
                  style=" width: 50px;height: 50px;margin-right: 10px;"
                  round
                  :src="oilDetails.gasLogoBig"
                />
                <div>
                  <div class="item_title">{{ oilDetails.gasName }}</div>
                  <div class="item_location">
                    <img class="location_icon" src="@/assets/imgs/dingwei.png" alt />
                    <div class="location_title">{{ oilDetails.site }}</div>
                  </div>
                </div>
              </div>
              <div class="pic_box">
                <div class="pic_rmb">￥</div>
                <div class="pic_num">{{ oilDetails.priceGun }}</div>
                <van-tag mark type="danger">{{ oilDetails.oilName }}</van-tag>
                <div class="guobiao">国标价{{ oilDetails.priceOfficial }}</div>
              </div>
              <div class="details_time">营业时间: - - 小时</div>
              <span class="details_mak">站内开票</span>
            </div>
            <div class="item_right" @click="handMap(oilDetails)">
              <img class="item_right_icon" src="@/assets/imgs/feiji.png" alt />
              <div class="item_right_title">{{oilDetails.spacing}}km</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div style="margin-top:60px;">
      <van-tabs v-model="active" swipeable>
        <van-tab title="我要加油">
          <myUpOil
            @handDis3="handDis3"
            @handGoup="handGoup"
            @handRow="handRow"
            :gunList="oilDetails.oilPriceList"
          ></myUpOil>
        </van-tab>
        <van-tab title="实时订单">
          <timeOrder></timeOrder>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import tag from '@/components/tag/index.vue'
import myUpOil from '@/components/myUpOil/index.vue'
import evaluate from '@/components/evaluate/index.vue'
import timeOrder from '@/components/timeOrder/index.vue'
import {homeDetails, subOread} from '@/api/user.js'
import wx from 'weixin-js-sdk'
export default {
  components: {
    tag,
    myUpOil,
    evaluate,
    timeOrder
  },
  data() {
    return {
      active: '',
      oilDetails: {}
    }
  },
  mounted() {
    console.log(this.$route.query.id)
    // JSON.parse(localStorage.getItem('user')).telPhone
    var that = this
    if (this.$route.query.id) {
      homeDetails({gasIds: this.$route.query.id, phone: JSON.parse(localStorage.getItem('user')).telPhone}).then(
        res => {
          console.log(res, '详情')
          if (!res.data) {
            this.$router.push({
              name: 'phone'
            })
            that.$toast('手机号有误,请从新录入手机号')
          } else {
            if (res.data.length != 0) {
              this.oilDetails = res.data[0]
              this.oilDetails.site = this.$route.query.site
              this.oilDetails.oilName = res.data[0].oilPriceList[0].oilName
              this.oilDetails.priceGun = res.data[0].oilPriceList[0].priceGun
              this.oilDetails.priceOfficial = res.data[0].oilPriceList[0].priceOfficial
              this.oilDetails.gunNo = res.data[0].oilPriceList[0].gunNos[0].gunNo
              this.oilDetails.gasLogoBig = this.$route.query.gasLogoBig
              this.oilDetails.spacing = this.$route.query.spacing
              this.oilDetails.latitude = this.$route.query.latitude
              this.oilDetails.longitude = this.$route.query.longitude
              //      longitude: item.gasAddressLongitude,
              // latitude: item.gasAddressLatitude
            }
          }
        }
      )
    }
  },
  methods: {
    handMap(item) {
      console.log(item)
      let that = this
      wx.ready(function() {
        wx.openLocation({
          latitude: Number(item.latitude), // 纬度，浮点数，范围为90 ~ -90
          longitude: Number(item.longitude), // 经度，浮点数，范围为180 ~ -180。
          name: item.gasName, // 位置名
          address: item.site, // 地址详情说明
          scale: 16, // 地图缩放级别,整形值,范围从1~28。默认为最大
          infoUrl: '' // 在查看位置界面底部显示的超链接,可点击跳转
        })
      })
    },
    handGoup() {
      let form = {
        gasId: this.oilDetails.gasId,
        oilNo: this.oilDetails.oilName,
        gunNo: this.oilDetails.gunNo,
        platformCode: JSON.parse(localStorage.getItem('user')).telPhone
      }
      if (form.gasId && form.oilNo && form.gunNo) {
        this.$router.push({
          name: 'sub',
          query: form
        })
      } else {
        this.$toast.fail('请选择...')
      }
      console.log(form, 'www')

      // platformCode=1778811&gasId=油站id&oilNo=92#&gunNo=1
    },
    handDis3(row) {
      console.log(row)
      this.oilDetails.gunNo = row.gunNo
    },
    handRow(row) {
      this.oilDetails.oilName = row.oilName
      this.oilDetails.priceGun = row.priceGun
      this.oilDetails.priceOfficial = row.priceOfficial
      this.oilDetails.gasLogoBig = this.$route.query.gasLogoBig
      this.oilDetails.gunNo = row.gunNos[0].gunNo
      this.$forceUpdate()
      console.log(this.oilDetails, '父组件', row)
    },
    onClickLeft() {
      this.$router.go(-1)
    }
  }
}
</script>

<style lang="scss" scoped>
.location_title {
  width: 180px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.details_box {
  .details_time {
    margin-left: 60px;
    color: #909399;
    margin-top: 10px;
    margin-bottom: 20px;
  }
  .details_mak {
    background-color: hsla(0, 87%, 69%, 0.1);
    border-color: hsla(0, 87%, 69%, 0.2);
    color: #f56c6c;
    padding: 3px;
    border-radius: 5px;
    box-sizing: border-box;
    font-size: 11px;
  }
  .deta_head {
    width: 100%;
    height: 160px;
    background-image: linear-gradient(to right, #ea5455, #feb692);
    padding: 0 20px;
    box-sizing: border-box;
    padding-top: 40px;
  }
  .head_msg_box {
    width: 100%;
    border-radius: 10px;
    background-color: #fff;
    box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.1);
  }
}
.navBar {
  display: flex;
  align-items: center;
  padding: 20px 20px;
  .nav_back {
    width: 16px;
    height: 16px;
    margin-right: 20px;
  }
  .nav_title {
    font-size: 14px;
  }
}
.site_item {
  padding: 16px;
  display: flex;
  justify-content: space-between;
  padding-bottom: 10px;
  margin-bottom: 20px;
  .item_right {
    text-align: center;
    .item_right_icon {
      margin-bottom: 8px;
      width: 18px;
      height: 18px;
    }
    .item_right_title {
      font-size: 12px;
      color: #909399;
    }
  }
  .item_left {
    .head_box {
      display: flex;
      align-items: center;
    }
    .head_img {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      margin-right: 10px;
    }
    .item_title {
      font-size: 15px;
      font-weight: bold;
      margin-bottom: 6px;
    }
    .item_location {
      display: flex;
      align-items: center;

      .location_icon {
        width: 12px;
        height: 12px;
      }
      color: #909399;
      margin-bottom: 6px;
    }
    .pic_box {
      margin-left: 60px;
      width: 100%;
      display: flex;
      align-items: center;
      // margin-bottom: 8px;
      .guobiao {
        color: #909399;
        font-size: 8px;
        margin-left: 8px;
        text-decoration: line-through;
      }
      .pic_rmb {
        font-size: 10px;
        color: red;
      }
      .pic_num {
        font-size: 22px;
        // font-weight: bold;
        color: red;
        margin-right: 5px;
      }
    }
    .dow_authentication {
      background-color: #ffcc99;
      color: #ff9900;
      padding: 3px;
      font-size: 10px;
      border-radius: 3px;
    }
  }
}
</style>
